<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海蓝之谜</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="images/bitbug_favicon.ico" />
</head>

<body>
    <div class="nav">
        <div class="left1">
            <img src="images/left.png" alt=""> 
        </div>
        <div class="left2">
            <p>订阅品牌资讯</p>

        </div>
        <div class="middle">
            <img src="images/logo1.png" alt="">

        </div>
        <div class="right">
            <ul>
            <li>门店/SPA</li>
            <li>登录/注册</li>
            <li>(0)</li>
        </ul>  
        </div>
    </div>
    <div class="daohang">
            <li><a href="index.html">精华面霜</a></li>
            <li><a href="changxiaobangdan.html">畅销榜单</a></li>
            <li><a href="mianbuhuli.html">面部护理</a></li>
            <li><a href="xiuhudizhuang.html">修护底妆</a></li>
            <li><a href="zhenxiangtaozhuang.html">臻享套装</a></li>
            <li><a href="jingxuanxilie.html">精选系列</a></li>
            <li>臻享荟</a></li>
            <li>品牌探索</a></li>
    </div>
    <div class="header">
        <p>海蓝之谜618焕新盛典，官网限时满5000加赠绿色皮箱<a href="#" class="link link--secondary"> 了解更多 </a></p>
        
    </div>
    <div id="banner">
        <a href="#" class="item">
            <img src="images/01.png" alt="">
        </a>
        <a href="#" class="item">
            <img src="images/02.png" alt="">
        </a>
        <a href="#" class="item">
            <img src="images/03.png" alt="">
        </a>
        <a href="#" class="item">
            <img src="images/04.png" alt="">
        </a>
        <a href="#" class="item">
            <img src="images/05.png" alt="">
        </a>
        <a href="#" class="item">
            <img src="images/06.png" alt="">
        </a>

        <div class="btn prev">
            < </div> <div class="btn next"> >
        </div>

        <ul id="tabs">
            <li class="tab active"></li>
            <li class="tab"></li>
            <li class="tab"></li>
            <li class="tab"></li>
            <li class="tab"></li>
            <li class="tab"></li>
        </ul>


    </div>
    <div class="banner1">
        <div class="banner1_1">
            <h1>畅销榜单</h1>
            <p>万众挚爱口碑星品 满足您护肤的不同需求</p>
        </div>

    </div>
    <div class="banner2">
        <div class="banner2-mini">
            <img src="images/a.png" width="340" height="340" alt="" />
            <div class="qqqq">
                <h4>Creme de la Mer</h4>
                <p>海蓝之谜经典精华面霜</p>
                <p>丰盈质地 经典奢华</p>
                <p>￥850起 / 4种规格</p>
            </div>
        </div>
        <div class="banner2-mini">
            <img src="images/b.png" width="340" height="340" alt="" />
            <div class="qqqq">
                <h4>The Treatment Lotion</h4>
                <p>海蓝之谜沁润修护精粹水</p>
                <p>元能修护 年轻觉醒</p>
                <p>￥900起 / 2种规格</p>
            </div>
        </div>
        <div class="banner2-mini">
            <img src="images/c.png" width="340" height="340" alt="" />
            <div class="qqqq">
                <h4>The Concentrate</h4>
                <p>海蓝之谜浓缩修护精华露</p>
                <p>浓缩修护 强韧如初</p>
                <p>￥1720起 / 3种规格</p>
            </div>
        </div>

    </div>

    <div class="banner3">
        <div class="banner3-left">
            <h1>REPAIR.</h1>
            <h1>REJUVENATE. RENEW.</h1>
            <h2>根源修护 共愈新生</h2>
            <button>立即购买</button>
        </div>
        <div class="banner3-right">
            <img src="images/banner1.png" width="530px" height="530px">
        </div>
    </div>

    <div class="banner4">
        <div class="banner4-left">
            <img src="images/banner2.jpg" width="530px" height="530px">
        </div>
        <div class="banner4-right">
            <h1>LET’S TAKE THE</h1>
            <h1>OCEAN TO HEART</h1>
            <h2>蔚蓝永续 共愈新生</h2>
            <button>立即购买</button>
        </div>

    </div>

    <div class="banner5">
        <div class="banner5_1">
            <h1>官网臻享 奢宠服务</h1>
            <p> 作为LA MER尊贵的客人，我们为您呈现奢华的服务体验</p>
        </div>
    </div>

    <div class="banner6">
        <div class="banner6-mini">
            <img src="images/1.png" width="340" height="340" alt="" />
            <div class="qqqq">
                <h2>生日礼遇</h2>
                <p>一份诚挚礼遇，注册后查看</p>
                <p>即刻尊享</p>
            </div>
        </div>
        <div class="banner6-mini">
            <img src="images/2.png" width="340" height="340" alt="" />
            <div class="qqqq">
                <h2>臻美奢华礼盒</h2>
                <p>每款海蓝之谜护肤臻品，皆以奢华礼盒精心包装，盒盖轻启间，释放重重尊宠礼意，是您礼献亲友挚爱的倾情之选。</p>
                <p>礼品选购</p>
            </div>
        </div>
        <div class="banner6-mini">
            <img src="images/3.png" width="340" height="340" alt="" />
            <div class="qqqq">
                <h2>安心免邮派送</h2>
                <p>毋需任何费用，您所购买的每件产品，皆会在安全贴心的快递，顺丰速运的护送下直达您的门口。</p>
                <p>立即购买</p>
            </div>
        </div>

    </div>
    <div class="banner7">
        <div class="banner7_1">
            <h1>赋活滋养</h1>
            <p> 璀璨旅途，奢享一路焕变</p>
        </div>
    </div>

    <div class="banner8">
        <img src="images/4.png" width="340" height="340" alt="" />
        <img src="images/5.png" width="340" height="340" alt="" />
        <img src="images/6.png" width="340" height="340" alt="" />

    </div>
    <div class="banner9">
        <div class="banner9-mini">
            <img src="images/1.png" width="200" height="200" alt="" />
            <div class="qqqq">
                <h3>The Concentrate</h3>
                <p>海蓝之谜浓缩修护精华露</p>
                <p>￥1720起 / 3种规格</p>
            </div>
        </div>
        <div class="banner9-mini">
            <img src="images/2.png" width="200" height="200" alt="" />
            <div class="qqqq">
                <h4>The Treatment Lotion Hydrating Mask</h4>
                <p>海蓝之谜沁润修护精粹面膜</p>
                <p>￥1300</p>
            </div>
        </div>
        <div class="banner9-mini">
            <img src="images/3.png" width="200" height="200" alt="" />
            <div class="qqqq">
                <h4>The Concentrate</h4>
                <p>海蓝之谜浓缩修护精华露</p>
                <p>浓缩修护 强韧如初</p>
                <p>￥1720起 / 3种规格</p>
            </div>
        </div>

    </div>
    
    <!--底部开始-->
    <div class="footer">
        <div class="foot1">
            <div class="footer-1">
                <ul>
                    <li>购物指南</li>
                    <li>精华面霜</li>
                    <li>畅销榜单</li>
                    <li>臻享套装</li>
                    <li>全线产品</li>
                    <li>今日礼遇</li>
                </ul>
            </div>
            <div class="footer-2">
                <ul>
                    <li>客户服务</li>
                    <li>客户服务</li>
                    <li>运输和快递</li>
                    <li>退换货</li>
                    <li>查询店铺</li>
                </ul>
            </div>
            <div class="footer-3">
                <div class="footer-top">
                    <form action="mailto:2336775770@qq.com">
                        <table>
                            <caption>注册</caption>
                            <tr>
                                <td><input type="text" placeholder="手机号码"><label for="">发送</label></td>
                            </tr>
                            <tr>
                                <td><input type="text" placeholder="请输入验证码"></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox" name="" id="" checked class="check">我同意接收来自LA
                                    MER海蓝之谜的广告信息（包括彩信和短信）。
                                </td>
                            </tr>

                            <tr>
                                <td>
                                    <button class="enter">
                                        提交
                                    </button>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>

        <div class="footer-min">
            <div class="min-top">
                <p>© La Mer Technology, Inc.</p>
            </div>
            <div class="min-top">
                <p>条款与条件&nbsp;隐私保护政策</p>
            </div> 
        </div>
        <div class="min-bottom">
            <p>沪ICP备08005263号</p>
            <img src="images/footer1.png">
            
            <p>沪公网安备31010602004735号</p>
            <img src="images/footer2.png">
        </div>
    </div>
 <!--底部结束-->

<!--返回顶部开始-->
    <div>
        <a href="" id="back" title="返回顶部"></a>
    </div>
<!--返回顶部结束-->

<!--底部js程序开始-->
<button onclick="myFunction()">enter</button>

<div id="enter">已经到最底了呦！</div>
<!--底部js程序结束-->


    <script src="js/jquery.min.js"></script>
    <script src="js/script.js"></script>









</body>

</html>